<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<html>
<head>
    <script src="<c:url value='/static/jquery/jquery-1.7.2.js'/>"></script>
    <script src="<c:url value='/static/jquery/jquery.dataTables.js'/>"></script>
    <style type="text/css">@import "<c:url value='/static/css/demo_table.css'/>";</style>
    <style type="text/css">
        body {
            background-color: #dcdcdc;
        }

        TR:hover {
            background-color: orange;
        }

        #head {
            background-color: yellow;
        }

        #datatable {
        /*margin-left:50%;*/
        }
    </style>
    <script type="text/javascript">
        function sortByNameOld() {
            // get the form values
            var firstName = $('#firstName').val();
            var lastName = $('#lastName').val();
            var telType = $('#telType').val();
            var telNumber = $('#telNumber').val();
            var norder = $('#norder').val();
            var lnorder = $('#lnorder').val();
            $.ajax({
//                url:"",
                type: "POST",
                data:"firstName=" + firstName + "&lastName=" + lastName + "&telType=" + telType + "&telNumber=" + telNumber + "&norder=" + norder + "&lnorder=" + lnorder,
                dataType:"json",
                success: function(response) {
//                    $('#info').remove();
//                    $('#info').html(response);
                    $('#ajax').html(response);
                },
                error: function(e) {
                    alert('Error: ' + e);
                }
            });
        }

    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#datatable').dataTable({
                "bRetrieve": true,
                "bDestroy": true,
                "aoColumnDefs": [
                    { 'bSortable': false, 'aTargets': [ 0,3 ] }

                ],
                "bServerSide":true,
                "bProcessing": true,
                "bJQueryUI": true,
                "oLanguage": {
                    "sInfo": " _TOTAL_ записей ( с _START_ до _END_)"
                },
                "sAjaxSource":"contactsajax.html",
                sSearch:true

            });
        });


        function notsort() {
            $('#datatable').dataTable({
               "aoColumnDefs": [
                    { 'bSortable': false, 'aTargets': [ 0,3,4,5 ] }

                ]
            })
        }
        function deleteContact(id) {
            $(document).ready(function() {
//                $('#datatable').dataTable({
//                    "bServerSide":true,
//                    "bRetrieve": false,
//                    "bDestroy": true,
//                    "bProcessing": true,
//                    "bJQueryUI": true,
//                    "sAjaxSource":"deletecontactajax.html?id=" + id,
//                    sSearch:true
//                });
//                   id = 0;
                $.ajax({
                    url:"deletecontactajax.html",
                    type: "GET",
                    data:"id=" + id,
//                dataType:"json",
                    success: function(response) {
//                    $('#info').remove();
//                    $('#info').html(response);
                        $('#ajax').html(response);
                    },
                    error: function(e) {
                        alert('Error: ' + e);
                    }
                });
            });
        }


        function viewContact(idDet, idContact) {
            var det = idDet;
            var cont = idContact;
            $(document).ready(function() {
                $('#ajax').dataTable({
//                    "sPaginationType": "full_numbers",

                    "bRetrieve": true,
                    "bDestroy": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bJQueryUI": true,
//                    "oLanguage":{"oPaginate":{"sNext":">"}},
//                    "data":"idDet=" + idDet + "&idContact=" + idContact,
                    "sAjaxSource"
                            :
                            "viewcontactajax.html?idDet=" + det + "&idContact=" + cont
                });
//                oLanguage.oPaginate.sPrevious = "до";
//                oLanguage.oPaginate.sNext = "после"

            }
                    )
                    ;
        }
    </script>

    <script type="text/javascript">
        function sortByLastName() {
            // get the form values
            var firstName = $('#firstName').val();
            var lastName = $('#lastName').val();
            var telType = $('#telType').val();
            var telNumber = $('#telNumber').val();
            var norder = $('#norder').val();
            var lnorder = $('#lnorder').val();
            $.ajax({
                type: "POST",
                url: "/mobile/contactsbylastname.html",
                data:"firstName=" + firstName + "&lastName=" + lastName + "&telType=" + telType + "&telNumber=" + telNumber + "&norder=" + norder + "&lnorder=" + lnorder,
                success: function(response) {
//                    $('#info').remove();
                    $('#info').html(response);
                },
                error: function(e) {
                    alert('Error: ' + e);
                }
            });
        }
    </script>
    <title>Contacts </title>
</head>

<body>
<div id="info">

    <center>
        <h1 style="color:#4b0082;">БАЗА КОНТАКТОВ</h1>

        <%--<sf:form method="POST" modelAttribute="searchDto">--%>
        <%--<table cellspacing="10" cellpadding="10" border="0">--%>
        <%--<thead>--%>
        <%--<tr>--%>
        <%--<th>имя контакта</th>--%>
        <%--<th>фамилия контакта</th>--%>
        <%--<th>тип телефона</th>--%>
        <%--<th>номер телефона</th>--%>
        <%--<th>&nbsp;</th>--%>
        <%--</tr>--%>
        <%--</thead>--%>
        <%--<tbody>--%>
        <%--<tr>--%>
        <%--<td><sf:input path="firstName" size="15" id="firstName"/></td>--%>
        <%--<td><sf:input path="lastName" size="15" id="lastName"/></td>--%>
        <%--<td><form:select path="telType" size="1" id="telType"> <br/>--%>
        <%--<form:option value="">не выбран</form:option>--%>
        <%--<form:option value="сотовый">сотовый</form:option>--%>
        <%--<form:option value="рабочий">рабочий</form:option>--%>
        <%--<form:option value="домашний">домашний</form:option>--%>
        <%--</form:select></td>--%>

        <%--<td><sf:input path="telNumber" size="15" id="telNumber"/></td>--%>
        <%--<td><a href="contacts.html">очистить фильтр</a></td>--%>
        <%--</tr>--%>
        <%--</tbody>--%>
        <%--</table>--%>
        <%--<input type="submit" value="найти"/>--%>
        <%--<sf:input type="hidden" id="lnorder" path="lnorder" value="${lnorder}"/>--%>
        <%--<sf:input type="hidden" id="norder" path="norder" value="${norder}"/>--%>
        <%--</sf:form>--%>

        <table id="datatable" border="1" cellpadding="5">
            <thead>
            <tr id="head">
                <th>№</th>


                <%--<th><input type="button" value="по имени" onclick="return sortByName();"/></th>--%>
                <%--<th><input type="button" value="по фамилии" onclick="return sortByLastName()"/></th>--%>
                <th bgcolor="#7fff00">Имя</th>
                <th bgcolor="#7fff00">Фамилия</th>
                <th>контактные данные</th>
                <sec:authorize access="hasRole('ROLE_ADMIN')">
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                </sec:authorize>

            </tr>
            </thead>
            <tbody></tbody>
        </table>


        <%--<tbody>--%>
        <%--<c:forEach items="${contactList}" var="contact">--%>

        <%--<tr>--%>
        <%--<td>--%>
        <%--<a href="editcontact.html?id=${contact.id}"><img src="<c:url value='/static/edit.jpg' />"--%>
        <%--alt="редактировать" width="30px"/></a>--%>
        <%--</td>--%>
        <%--<td>--%>
        <%--<a href="deletecontact.html?id=${contact.id}"--%>
        <%--onClick="return window.confirm('Вы действительно хотите удалить контакт ${contact.firstName} ${contact.lastName} ?')"><img--%>
        <%--src="<c:url value='/static/del.png' />" alt="редактировать" width="30px"/></a>--%>
        <%--</td>--%>
        <%--<td>--%>
        <%--<b> ${contact.firstName} </b>--%>
        <%--</td>--%>
        <%--<td>--%>
        <%--<b> ${contact.lastName} </b>--%>
        <%--</td>--%>
        <%--<td>--%>
        <%--<c:forEach items="${contact.contactTelDetails}" var="detail">--%>

        <%--${detail.telType} - ${detail.telNumber}--%>


        <%--</c:forEach>--%>
        <%--</td>--%>

        <%--</tr>--%>
        <%--</c:forEach>--%>
        <%--</tbody>--%>


        <br/><br/>
        <a href="addcontact.html"><b>Добавить контакт</b></a> <br/><br/><br/><br/> <a
            href="index.html">Стартовая</a>

        <h1>
            <a href="<c:url value='/j_spring_security_logout'/>">выйти</a>
        </h1>
    </center>
    <%--<input type="button" value="по имени" onclick="return viewContact(103,97);"/>--%>
    <%--<table id="ajax">--%>
    <%--<thead>--%>
    <%--<tr>--%>
    <%--<th>Тип</th>--%>
    <%--<th>Номер</th>--%>
    <%--&lt;%&ndash;<th>ID номера</th>&ndash;%&gt;--%>
    <%--<th>&nbsp;</th>--%>
    <%--<th>&nbsp;</th>--%>
    <%--</tr>--%>
    <%--</thead>--%>
    <%--<tbody></tbody>--%>
    <%--</table>--%>


</div>

</body>

</html>
